<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <!-- 阻止浏览器缓存页面内容 -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息回复</title>
    <link rel="stylesheet" href="/stylesheets/root.css">
    <link rel="stylesheet" href="/stylesheets_copy/massage-page.css">
</head>

<body>
    <!-- 顶部栏组件 -->
    <div class="fixed-top">
        <div id="top">
            <!-- 获取到用户的名字 -->
            <p>用户名字</p>
            <a href="/webpage_copy/massage/list_massage.html">
                <img class="return" src="/images/public_images/return.png" alt="返回">
            </a>
            <img class="massage-page-more" src="/images/massage/more.png" alt="">
        </div>
    </div>


    <div class="chat-container">
        <div class="messages">
            <!-- 消息内容将在这里显示 -->
        </div>
        <div class="input-area">
            <input type="text" placeholder="输入消息..." id="message-input">
            <button id="send-btn">发送</button>
        </div>
    </div>
    <script>
        const messagesDiv = document.querySelector('.messages');
        const messageInput = document.getElementById('message-input');
        const sendBtn = document.getElementById('send-btn');

        sendBtn.addEventListener('click', sendMessage);

        function sendMessage() {
            const message = messageInput.value.trim();
            if (message !== '') {
                const messageElement = createMessageElement(message, 'sent');
                messagesDiv.appendChild(messageElement);
                messageInput.value = '';

                // 模拟服务器响应
                setTimeout(() => {
                    const response = generateResponse(message);
                    const responseElement = createMessageElement(response, 'received');
                    messagesDiv.appendChild(responseElement);
                    messagesDiv.scrollTop = messagesDiv.scrollHeight;
                }, 1000);
            }
        }

        function createMessageElement(text, className) {
            const messageElement = document.createElement('div');
            messageElement.classList.add('message', className);
            messageElement.textContent = text;
            return messageElement;
        }

        function generateResponse(message) {
            // 这里可以实现更复杂的逻辑来生成响应内容
            return `收到你的消息: ${message}`;
        }
    </script>
</body>

</html>